<template>
    <div>
        <div class="weizhi">
            <el-input placeholder="请输入书名" v-model="selLend" clearable class="inputBut"></el-input>
        <el-button type="primary" @click="selectLend" class="but">查询图书</el-button>
        </div>
        <div class="weizhi2">
            <el-table :data="tableData"
            border
            style="width: 100%">
                <el-table-column fixed prop="id" label="id" width="auto">
                </el-table-column>
                <el-table-column prop="userId" label="用户id" width="auto">
                </el-table-column>
                <el-table-column prop="userName" label="用户姓名" width="auto">
                </el-table-column>
                <el-table-column prop="bookId" label="书id" width="auto">
                </el-table-column>
                <el-table-column prop="bookName" label="书名" width="auto">
                </el-table-column>
                <el-table-column prop="bookNum" label="书数" width="auto">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button @click="delLend(scope.row.id,scope.row.userId)" type="text" size="small">还书</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        data(){
            return {
                success : true,
                // 遍历当前数据
                tableData: [],
                // 从登录中获取id
                realId : '',
                // 保存当前获取的userId
                userId : '',
            }
        },
        mounted(){
            axios.get('/selLendAll').then(
            response => {
                console.log(response.data)
                this.tableData = response.data
            },
            error => {
                console.log(error.message)
            })
        },
        methods : {
            selectLend(){
                if(!this.selLend.trim()) return 
                // 创建书名
                axios.get('/selLend/userName?userName=' + this.selLend).then(
                    response => {
                        console.log('响应的内容', response.data);
                         this.tableData = response.data
                    },
                    error => {
                        console.log('错误信息是', error.message)
                    }
                )
                //清空
                this.selLend = ''
            },

            // 还书，就是删除这个记录
            delLend(id,userid){
                axios.get('/getCurrentId').then(
                    response => {
                        console.log(response.data)
                        this.realId = response.data
                        console.log("156684524eroeiuoaweihfgoiawhf" + this.realId)
                    },
                    error => {
                        console.log(error.message)
                    })
                    setTimeout(()=>{
                        if(this.realId == ''){
                        alert('请先登录')
                        return
                        }else if(this.realId == userid){
                        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {
                            axios.post('/delLend', {id : id }).then(
                                response => {
                                    console.log("响应：" + response.data)
                                },
                                error => {
                                    console.log("错误：" + error.message)
                                })
                            this.$message({
                                type: 'success',
                                message: '还书成功!',
                            })
                            }).catch(() => {
                                this.$message({
                                type: 'info',
                                message: '已取消归还'
                            });          
                        });
                    }else{
                        alert("只能归还当前账户所借的书")
                    }
                },100)
                    
            },
        } 
    }
</script>

<style scoped>
    .inputBut{
        width: 250px;
        height: 45px;
    }
    .weizhi{
        text-align: center;
        position: relative;
        top:50px;
        
    }
    .weizhi2{
        position: relative;
        top:100px;
        
    }
    .but{
        width: 100px;
        height: 50px;
        font-size: 20px;
    }
</style>